<!DOCTYPE html>
<html lang="cmn-Hans-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<meta name="author" content="Auelnce,aulence@foxmail.com">
	<title>Vue渲染方式</title>
	<link rel="shortcut icon" href="../img/favicon.ico">
	<link rel="bookmark" href="../img/favicon.ico">
	<link rel="stylesheet" href="../plugin/bootstrap.min.css">
	<link rel="stylesheet" href="../css/common.css">
</head>
<body>
	<header>
		<nav>
			<ul class="breadcrumb">
				<li><a href="../index.html">首页</a></li>
				<li class="active">Vue渲染方式</li>
			</ul>
		</nav>
	</header>

	<main>
		<article>
			<h1>Vue渲染方式</h1>

			<section id="app-1" >
				<h2 class="section_h2">#app-1：数组和对象的遍历方式</h2>
				<ul>
					<li class="list-none">列表的数组渲染方式：</li>
					<li v-for="item in listRender_arr">{{ item }}</li>
					<li class="list-none mt-50">表格的对象渲染方式：</li>
				</ul>
				<table class="table table-bordered">
					<thead class="bg-theme text-weight-normal">
						<tr>
							<th>星宿</th>
							<th>头衔</th>
							<th>姓名</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="tr in listRender_obj">
                            <!-- <td>{{ tr.star }}</td>
                                <td>{{ tr.title }}</td>
                                <td>{{ tr.name }}</td> -->
                            <td v-for="td in tr">{{ td }}</td>
						</tr>
					</tbody>
				</table>
			</section>

			<section id="app-2" >
				<h2 class="section_h2">#app-2：父级信息遍历及键名遍历（如果是数组则是索引）</h2>
				<table class="table table-bordered">
					<thead class="bg-theme text-weight-normal">
						<tr>
							<th>星宿</th>
							<th>头衔</th>
							<th>姓名</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(tr, key) in listRender_obj">
							<td>{{'index为：' + key + ' 星宿：' + tr.star}}</td>
							<td>{{'index为：' + key + ' 头衔：' + tr.title}}</td>
							<td>{{'index为：' + key + ' 姓名：' + tr.name}}</td>
						</tr>
					</tbody>
				</table>
				<tips class="comment">该示例主要体现了“v-for”指令内“key”属性所表示的值的含义，以及体现了该指令内的属性和数据模型上的属性的本质关系，即他们在模版引擎内表现一致的特点。而“v-for”里面的“tr”属性和我们之前接触的“别名”（alias）一致，它仍然表示所遍历对象的别名。</tips>
			</section>

			<section id="app-3">
				<h2 class="section_h2">#app-3：对象属性访问</h2>
				<table class="table table-bordered">
					<thead class="bg-theme text-weight-normal">
						<tr>
							<th>索引</th>
							<th>键名</th>
							<th>值名</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(value, key, index) in roleInfo">
							<td>{{index}}</td>
							<td>{{key}}</td>
                            <td>{{value}}</td>
						</tr>
					</tbody>
				</table>
				<tips class="comment">和原生的JavaScript不同，Vue为对象也提供了索引下标值，而这段代码里的“index”指的就是对象的索引值，而“key”是对象的键名，而“value”是对象的键值，需要牢记这三个值的顺序。这三个值的命名均可以自定义，但也应当遵从语义化的规范。</tips>
			</section>

			<section id="app-4" >
				<h2 class="section_h2">#app-4：模版遍历法</h2>
				<template v-for="food in dlInfo">
					<dl>
						<dt>{{food.type}}</dt>
						<dd>{{food.name}}</dd>
					</dl>
				</template>
				<h3 class="section_h3">其实上例也可以这样写（细节请查看本节对应HTML文件）：</h3>
				<dl v-for="food in dlInfo">
					<dt>{{food.type}}</dt>
					<dd>{{food.name}}</dd>
				</dl>
				<tips class="comment">在视图被编译后&lt;template&gt;标签并不会被渲染到页面上，但该标签上的指令仍然有效。这两种语法结构并没有功能上的差异，可以将“v-if”、“v-show”、“v-for”等指令抽取出来放在template上面（但是不要将“v-if”或“v-show”和“v-for”出现在同一个标签上，详见<a href="https://cn.vuejs.org/v2/guide/list.html#v-for-%E4%B8%8E-v-if-%E4%B8%80%E5%90%8C%E4%BD%BF%E7%94%A8" target="_blank" rel="noopener noreferrer">官方文档</a>的说明），而把绑定的事件放在temlpate内的标签上，这样做可以使HTML文档结构更加清晰，可以改善一个标签名+多个属性后标签过长的情况</tips>
			</section>

			<section id="app-5" style="height: 426px;">
				<h2 class="section_h2">#app-5：动态条件渲染</h2>
				<form class="form-group">
					<label class="checkbox-inline" v-for="checkbox in hobbys">
						<input name="hobby" type="checkbox" v-model="checkbox.show" :checked="checkbox.show">
						<span>{{checkbox.name}}</span>
					</label>
				</form>
				<ul>
					<li class="list-none">您的爱好是（可点击）：</li>
					<template v-for="hobby in hobbys">
						<li 
							@click="showInfo(hobby)"
							v-if="hobby.show"
						>{{hobby.name}}</li>
					</template>
					<!--  这样的写法和上面的写法是等效的，但是标签组成过长，使得可读性变得比较差  -->
					<!--<li v-for="(hobby,index) in hobbys" v-if="hobby.show"  @click="showInfo(index)">{{hobby.name}}</li>-->
				</ul>
				<tips class="comment">请在对应的HTML部分查看HTML注释内容</tips>
			</section>

			<section id="app-6">
                <h2 class="section_h2">#app-6：逻辑判断渲染</h2>
                
				<form class="form-group">
					<label class="checkbox-inline" v-for="rdo in types">
						<input name="hobby" type="radio" v-model="selectItem" :value="rdo">
						<span>{{rdo}}</span>
					</label>
                </form>
				
                <div class="album" v-if="selectItem === '萌宠'">
                    <img :style="imgStyle" v-for="url in albums.pet" :src="url"/>
                </div>
                <div class="album" v-else-if="selectItem === '风景'">
                    <img :style="imgStyle" v-for="url in albums.scenery" :src="url"/>
                </div>
                <div class="album"  v-else-if="selectItem === '汽车'">
                    <img :style="imgStyle" v-for="url in albums.car" :src="url"/>
                </div>
                <div class="album" v-else>
                    <img :style="imgStyle" v-for="url in albums.beauty" :src="url"/>
                </div>
				<tips class="comment">该示例实现的几个关键：摆脱DOM操作的思想束缚、运用数据驱动模式思维、“v-if”、“v-else-if”和“v-else”的理解和使用、表单中“v-model”和“:value”的关系、“v-for”的使用。如果对这几点都已经理解得比较好，该示例就比较容易看懂了。</tips>
			</section>

		</article>
	</main>

	<script src="../plugin/vue.js"></script>
	<script src="../js/rendering.js"></script>
</body>
</html>